<template>
  <div class="page-background">
    <div class="container" transition="fade">
      <div v-if="tableData.length > 0" class="product-detail-wrapper">
        <div class="product-image">
          <img :src="getImageUrl(tableData[0].imageUrl)" alt="Product Image" class="product-img"
               @mouseenter="hoverImage(true)" @mouseleave="hoverImage(false)">
        </div>
        <div class="product-info">
          <h2 class="product-title">{{ tableData[0].productName }}</h2>
          <p><strong>店铺:</strong> {{ tableData[0].storeName }}</p>
          <p><strong>价格:</strong> {{ tableData[0].price }}元</p>
          <p><strong>销量:</strong> {{ tableData[0].salesVolume }}</p>
          <p><strong>分类:</strong> {{ tableData[0].category }}</p>
          <p><strong>描述:</strong> {{ tableData[0].description }}</p>
          <div class="action-buttons">
            <el-button @click="save" class="btn-save">加入购物车</el-button>
            <el-button @click="collect" class="btn-collect">收藏</el-button>
            <div class="interaction-stats">
              <span>收藏({{ getCollectionCount() }})</span>
              <span>分享</span>
              <span>点赞({{ getLikeCount() }})</span>
            </div>
          </div>
        </div>
      </div>
      <div class="comment-section">
        <div class="comment-input">
          <input v-model="commentContent" placeholder="输入评论内容" class="comment-input-field">
          <input type="number" v-model="rating" min="1" max="5" placeholder="输入评分（1-5）" class="rating-input">
          <el-button @click="addComment" class="btn-comment">提交评论</el-button>
        </div>
        <div v-if="comments.length > 0" class="comments-list">
          <h3>评论：</h3>
          <ul>
            <li v-for="(comment, index) in comments" :key="index" class="comment-item"
                @mouseenter="highlightComment(index)" @mouseleave="clearHighlight(index)">
              <div class="comment-user-info">
                <p>用户：{{ comment.userId }}</p>
                <p>评分：{{ comment.rating }}</p>
              </div>
              <p class="comment-content">{{ comment.comment }}</p>
              <p class="comment-date">{{ formatDate(comment.createdAt) }}</p>
            </li>
          </ul>
        </div>
        <p v-else>暂无评论</p>
      </div>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";
import dayjs from 'dayjs';

export default {
  name: "ProductDetailInfo",
  components: {},
  data() {
    return {
      form: {},
      dialogVisible: false,
      search: '',
      currentPage: 1,
      total: 10,
      pageSize: 10,
      tableData: [],
      idQuery: '',
      showAdditionalPage: true,
      commentContent: '',
      comments: [],
      rating: 0,
      imageHovered: false,
      highlightedCommentIndex: -1
    };
  },
  methods: {
    searchById(id) {
      request.get(`/user/getProductInfoDetail/${id}`).then(res => {
        if (res.code === '0') {
          this.tableData = [res.data];
          this.total = 1;
          this.showAdditionalPage = true;
          this.form = {
            id: this.tableData[0].id,
            productId: this.tableData[0].productId,
          };
          this.getComments();
        } else {
          this.$message.error("查询失败");
          this.tableData = [];
          this.total = 0;
          this.showAdditionalPage = false;
        }
      });
    },
    getCollectionCount() {
      return this.tableData[0]?.collectionCount || 0;
    },
    getLikeCount() {
      return this.tableData[0]?.collectionCount || 0;
    },
    save() {
      request.post("user/addCart", this.form).then(res => {
        if (res.code === '0') {
          this.$message.success("添加购物车成功");
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    collect() {
      request.post("/user/collectShop", {productId: this.tableData[0].id}).then(res => {
        if (res.code === '0') {
          this.$message.success("收藏成功");
          this.getCollectionCount();
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    addComment() {
      const userId = 1; // 实际应用中应从用户会话中获取
      const productId = this.tableData[0].id;
      request.post('/user/addComment', {
        id: Date.now(), // 使用时间戳作为临时 ID
        productId,
        userId,
        comment: this.commentContent,
        rating: this.rating,
        createdAt: dayjs().format('YYYY-MM-DDTHH:mm:ss')
      }).then(res => {
        if (res.code === '0') {
          this.$message.success('评论提交成功');
          this.commentContent = '';
          this.rating = 0;
          this.getComments();
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    getComments() {
      if (this.tableData.length > 0) {
        const productId = this.tableData[0].productId;
        request.get(`/user/getProductComments/${productId}`).then(res => {
          if (res.code === '0') {
            this.comments = res.data;
          } else {
            this.$message.error(res.msg);
          }
        });
      } else {
        this.comments = [];
      }
    },
    formatDate(dateStr) {
      return dayjs(dateStr).format('YYYY-MM-DD HH:mm');
    },
    getImageUrl(imagePath) {
      return imagePath.startsWith('http') ? imagePath : require(`@/${imagePath}`);
    },
    hoverImage(hovered) {
      this.imageHovered = hovered;
    },
    highlightComment(index) {
      this.highlightedCommentIndex = index;
    },
    clearHighlight() {
      this.highlightedCommentIndex = -1;
    }
  },
  created() {
    const id = this.$route.query.id;
    if (id) {
      this.searchById(id);
      this.getComments();
    }
  }
};
</script>

<style scoped>
:root {
  --primary-color: #FF4500; /* 橙红色，作为主色调，更具动漫活力感 */
  --secondary-color: #FFA500; /* 橙色，用于高亮或悬停状态 */
  --text-color: #FFFFFF; /* 白色文字 */
  --background-color: #282828; /* 深灰色背景，营造动漫风格的深邃感 */
  --border-color: #696969; /* 深灰色边框 */
  --button-hover-color: #FF6347; /* 番茄红，按钮悬停颜色 */
  --highlight-color: #FFFF00; /* 黄色，用于评论高亮等特殊效果 */
  --animation-duration: 0.5s; /* 动画持续时间，可根据喜好调整 */
}

.page-background {
  background-color: var(--background-color);
  padding: 20px;
  animation: fadeInPage 1s ease-in-out;
}

.container {
  background-color: var(--primary-color);
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  max-width: 1200px;
  margin: auto;
  animation: fadeInContainer 1s ease-in-out;
}

.product-detail-wrapper {
  display: flex;
  align-items: flex-start;
  transition: transform 0.3s ease-in-out;
  animation: fadeInWrapper 1s ease-in-out;
}

.product-image {
  margin-right: 40px;
  transition: transform 0.3s ease-in-out;
  animation: fadeInImage 1s ease-in-out;
}

.product-img {
  width: 200px;
  height: 200px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease-in-out;
  animation: zoomInImage 1s ease-in-out;
}

.product-img:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
  animation: zoomInImageHover 0.3s ease-in-out;
}

.product-info {
  flex: 1;
  animation: fadeInInfo 1s ease-in-out;
}

.product-title {
  margin-bottom: 10px;
  color: var(--text-color);
  transition: color 0.3s ease-in-out;
  animation: fadeInTitle 1s ease-in-out;
}

.action-buttons.el-button {
  margin-right: 10px;
  margin-bottom: 10px;
  transition: background-color 0.3s;
  background-color: #8B0000; /* 暗红色按钮 */
  color: var(--text-color);
  animation: pulseButton 1s infinite alternate;
}

.action-buttons.el-button:hover {
  background-color: var(--button-hover-color);
  color: var(--text-color);
  animation: bounceButton 0.3s ease-in-out;
}

.interaction-stats {
  display: flex;
  align-items: center;
  margin-top: 10px;
  animation: fadeInInteractionStats 1s ease-in-out;
}

.interaction-stats span {
  margin-right: 20px;
  color: var(--text-color);
  transition: color 0.3s ease-in-out;
  animation: fadeInInteractionSpan 1s ease-in-out;
}

.comment-input {
  display: flex;
  align-items: center;
  margin-top: 20px;
  animation: fadeInCommentInput 1s ease-in-out;
}

.comment-input-field, .rating-input {
  padding: 10px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  margin-right: 10px;
  transition: border-color 0.3s;
  animation: borderGlow 0.5s infinite alternate;
}

.comment-input-field:focus, .rating-input:focus {
  border-color: var(--primary-color);
  animation: borderFocusGlow 0.5s infinite alternate;
}

.btn-comment {
  padding: 10px 20px;
  background-color: #8B0000; /* 暗红色按钮 */
  color: var(--text-color);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
  animation: pulseButtonComment 1s infinite alternate;
}

.btn-comment:hover {
  background-color: var(--button-hover-color);
  color: var(--text-color);
  animation: bounceButtonComment 0.3s ease-in-out;
}

.comments-list {
  margin-top: 20px;
  animation: fadeInCommentsList 1s ease-in-out;
}

.comment-item {
  background-color: var(--background-color);
  padding: 15px;
  margin-bottom: 10px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease-in-out;
  animation: fadeInCommentItem 1s ease-in-out;
}

.comment-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  animation: commentItemHover 0.3s ease-in-out;
}

.comment-user-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  animation: fadeInCommentUserInfo 1s ease-in-out;
}

.comment-content {
  margin-bottom: 10px;
  animation: fadeInCommentContent 1s ease-in-out;
}

.comment-date {
  color: var(--text-color);
  font-size: 12px;
  animation: fadeInCommentDate 1s ease-in-out;
}

.highlighted-comment {
  background-color: var(--highlight-color);
  animation: highlightCommentAnimation 0.3s ease-in-out;
}

@keyframes fadeInPage {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInContainer {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes fadeInWrapper {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInImage {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes zoomInImage {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes zoomInImageHover {
  from {
    opacity: 1;
    transform: scale(1.1);
  }
  to {
    opacity: 1;
    transform: scale(1.2);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  }
}

@keyframes fadeInInfo {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInTitle {
  from {
    opacity: 0;
    transform: translateY(-20px);
    color: rgba(255, 255, 255, 0.5);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    color: var(--text-color);
  }
}

@keyframes pulseButton {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.05);
  }
}

@keyframes bounceButton {
  from {
    transform: scale(1);
    background-color: #8B0000;
  }
  to {
    transform: scale(1.1);
    background-color: var(--button-hover-color);
  }
}

@keyframes fadeInInteractionStats {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInInteractionSpan {
  from {
    opacity: 0;
    transform: translateY(20px);
    color: rgba(255, 255, 255, 0.5);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    color: var(--text-color);
  }
}

@keyframes fadeInCommentInput {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes borderGlow {
  from {
    border-color: var(--border-color);
  }
  to {
    border-color: var(--primary-color);
    box-shadow: 0 0 5px var(--primary-color);
  }
}

@keyframes borderFocusGlow {
  from {
    border-color: var(--primary-color);
    box-shadow: 0 0 3px var(--primary-color);
  }
  to {
    border-color: var(--secondary-color);
    box-shadow: 0 0 8px var(--secondary-color);
  }
}

@keyframes pulseButtonComment {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.05);
  }
}

@keyframes bounceButtonComment {
  from {
    transform: scale(1);
    background-color: #8B0000;
  }
  to {
    transform: scale(1.1);
    background-color: var(--button-hover-color);
  }
}

@keyframes fadeInCommentsList {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInCommentItem {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes commentItemHover {
  from {
    transform: translateY(-5px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }
  to {
    transform: translateY(-8px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
  }
}

@keyframes fadeInCommentUserInfo {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInCommentContent {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInCommentDate {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes highlightCommentAnimation {
  from {
    background-color: var(--background-color);
  }
  to {
    background-color: var(--highlight-color);
  }
}

</style>